<template>
	<view class="content">
		<view style="padding-top: 20rpx;">
			<view style="width: calc(100% - 50rpx);display: flex;background-color: #fff;margin:auto;padding: 0 15rpx;height: 90rpx;">
				<view style="width: 100%;display: flex; align-items: center; justify-content: space-between;">
					<view style="display: flex; align-items: center;">
						<view style="margin-right: 10rpx; font-weight: bold;" @click="showPicker">所属单位</view>
						<view class="inputSelector">
							<view style="padding: 0 10rpx 0 20rpx;" @click="showPicker">{{companyIdText || '请选择'}}</view>
							<view style="padding-right: 20rpx;">
								<uni-icons v-if="companyIdText"
									class="content-clear-icon is-textarea-icon"
									type="clear"
									size="20px"
									color="#c0c4cc"
									@click.stop.prevent="onClear"
								></uni-icons>
								<uni-icons v-else type="bottom" size="14" color="#999"  @click="showPicker"/>
							</view>
						</view>
					</view>
					
					<view style="display: flex; align-items: center; flex: 1; margin: 0 15rpx;">
						<uni-easyinput v-model="name" placeholder="储罐名称" />
					</view>
					<button type="primary" @click="submit('valiForm')" style="width: 100rpx;height: 50rpx;line-height: 50rpx;
					font-size: 22rpx;background-color: #5E9CF1;">搜索</button>
				</view>
				
			</view>
		</view>
		<!-- 列表模块 -->
		<view class="deviceClass" style="overflow: hidden;" v-if="dataList.length > 0">
			<view v-for="(item,index) in dataList" :key="index"
				style="float: left;width: calc(50% - 30rpx);background-color: #EAEAEA;margin: 0rpx 15rpx 25rpx;">
				<view style="width: calc(100% - 19rpx);height: 50rpx;line-height: 50rpx;color: #fff;background-color:#5E9CF1;font-size: 18rpx;text-align: center;
				padding: 0 10rpx;margin-bottom: 10rpx;">{{item.name}}</view>
				<view style="width: 150rpx;margin:auto;height: 160rpx;"
					:class="item.tankType == 'STAND' ? 'storageTankClass':'storageTankClassTo'">
					<view :class="item.tankType == 'STAND' ? 'container1':'container2'">
						<!-- 循环体 -->
						<view style="display: flex; margin-top: 10rpx;" v-for="(to, index) in item.sensors" :key="index" v-if="index == 0">
							<!-- 量体 -->
							<view :class="item.tankType == 'STAND' ? 'proportion':'proportionTo'"
								:style="{height:heightTrends(item.tankType) + 'rpx'}">
								<view style="background: #0411C2; width: 100%; position: absolute; bottom: 0;"
									:style="{height:(heightTrends(item.tankType)/to.max)*to.latest.val + 'rpx'}"></view>
							</view>
							<!-- 刻度 -->
							<view :class="item.tankType == 'STAND' ? 'scale':'scaleTo'">
								<view class="scaleLi" :class="i%2 == 0 ? '':'scaleLiShort'" v-for="(t, i) in to.min_max"
									:key="i">
									<view class="scaleLiText">{{i%2 == 0 ? t:''}}</view>
								</view>
								<view style="border-top: 1px solid #000000; position: relative; width: 20rpx;">
									<view class="scaleLiText">0</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view
					style="width: calc(100% - 38rpx);margin:0rpx auto 10rpx;background-color: #fff;height: 40rpx;line-height: 40rpx;font-size: 16rpx;padding: 0 10rpx;">
					液位<span style="margin:0 20rpx;">{{item.sensors[0].latest.val || 0}}</span><span style="float: right;">{{item.sensors[0].latest.modifyDate}}</span>
				</view>
				<view
					style="width: calc(100% - 38rpx);margin:5rpx auto 10rpx;background-color: #fff;height: 40rpx;line-height: 40rpx;font-size: 16rpx;padding: 0 10rpx;">
					容积<span style="margin:0 20rpx;">{{item.sensors[0].latest.vol || 0}}L</span><span style="float: right;">{{item.sensors[0].latest.modifyDate}}</span>
				</view>
				<view
					style="width: calc(100% - 38rpx);margin:5rpx auto 10rpx;background-color: #fff;height: 40rpx;line-height: 40rpx;font-size: 16rpx;padding: 0 10rpx;">
					重量<span style="margin:0 20rpx;">{{densityNum(item)}}</span><span style="float: right;">{{item.sensors[0].latest.modifyDate}}</span>
				</view>
			</view>
		</view>
		<ba-tree-picker v-if="treePickerState" ref="treePicker" :multiple='false' @select-change="selectChange" title="请选择所属单位"
			:localdata="findTreeData" valueKey="id" textKey="name" childrenKey="children" :confirmColor="'#0055ff'" />
	</view>
</template>

<script>
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue";
	export default {
		components: {
			baTreePicker,
		},
		data() {
			return {
				findTreeData: [],
				dataList: [],
				companyId:'',
				companyIdText:'',
				name: '',
				treePickerState:true,
				
				// stand: true,
				// form: {
				// 	status: '',
				// 	num: '',
				// 	remark: ''
				// },
				// total: 0,
				// pageNum: 1,
				// pageSize: 4,
				
				// productId: '',
			};
		},
		methods: {
			onClear(){
				this.companyId = ''
				this.companyIdText = ''
				this.name = ''
				this.treePickerState = false
				setTimeout(function(){
					this.treePickerState = true
				}.bind(this),500)
			},
			densityNum(item){
				if(item.sensors[0] && item.sensors[0].latest){
					return (Number(item.sensors[0].latest.vol)*Number(item.density)).toFixed(2);
				}
			},
			showPicker() {
				this.$refs.treePicker._show();
			},
			//监听选择（ids为数组）
			selectChange(ids, names) {
				console.log(ids, names)
				this.companyId = ids[0]
				this.companyIdText = names
			},
			change(e) {
				console.log("e:", e);
			},
			// 柱状图动态高度，立、卧
			heightTrends(e) {
				if (e == 'STAND') {
					return "130"
				} else{
					return "100"
				}
			},
			combination(minNum, maxNum) {
				// 设置默认值
				const min = minNum || 0;
				const max = maxNum || 0;
				let grid = (max - min) / 10;
				let str = []
				var num = 0
				for (let i = 1; i <= 10; i++) {
					num = num + grid
					str.push(parseFloat(num.toFixed(2)))
				}
				str = str.reverse()
				return str;
			},
			// 搜索
			submit() {
				this.getMaterialInventory('up')
			},
			close() {
				this.getMaterialInventory('up')
				this.$refs.alertToDialog.close()
			},
			//获取物料库存列表
			getMaterialInventory(e) {
				uni.showLoading({title: '数据加载中...',mask: true})
				if (e == 'up') {
					this.dataList = []
					this.pageNum = 1
				} else {
					if (Math.ceil(this.total / this.pageSize) < this.pageNum) {
						return setTimeout(() => {
							uni.showToast({
								title: '没有更多数据了！',
								icon: 'none'
							});
						}, 500);
					}
				}
				this.$http.get('/api/v1/tankInfo/list',
				{
					companyId: this.companyId,
					name: this.name,
					start: 0,
					limit: 5000,
				}, true).then(res => {
					if (res.success) {
						if (res.data.length > 0) {
							this.total = res.total
							this.dataList = [...this.dataList, ...res.data]
							// 循环数据
							this.dataList.forEach(items => {
								items.sensors.forEach(item => {
									item.min_max = this.combination(item.min, item.max)
								})
							})
							if (e == 'UP') uni.stopPullDownRefresh(); // 停止当前页面下拉刷新
							uni.hideLoading();
						} else {
							uni.hideLoading()
							uni.showToast({
								title: "暂无数据",
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
					if (e == 'UP') uni.stopPullDownRefresh(); // 停止当前页面下拉刷新
					uni.hideLoading();
				})
			}
		},
		// 下拉到底部后加载新数据
		onReachBottom() {
			//判断下一页是否存在数据，不存在将显示暂无数据等提示语
			// if (this.dataList.length < this.pageSize || Math.ceil(this.total / this.pageSize) < this.pageNum) {
			// 	return setTimeout(() => {
			// 		uni.showToast({
			// 			title: '没有更多数据了！',
			// 			icon: 'none'
			// 		});
			// 	}, 500);
			// }
			// this.pageNum++; //页数加一
			// this.getMaterialInventory('down'); //回调接口
		},
		onLoad() {
			this.getMaterialInventory('up')
			if(this.$method.getStorageTo("findTree")){
				this.findTreeData = this.$method.getStorageTo("findTree")
			}else{
				this.$http.get('/api/v1/sysCompany/findTree', {}, true).then(res => {
					if (res.data.items) {
						this.findTreeData = res.data.items
						this.$method.setStorageTo("findTree", res.data.items)
					} else {
						uni.showToast({title: res.msg,icon: 'none'});
					}
				}).catch(err => {
					uni.showToast({title: err.msg,icon: 'none'});
				})
			}
		},
		onShow() {
			// this.treePickerState = false
			// setTimeout(function(){
			// 	this.treePickerState = true
			// }.bind(this),500)
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		// background-color: #fff;
		// overflow-y: scroll;
	}

	.uni-select {
		height: 50rpx !important;
	}

	.uni-easyinput__content-input {
		height: 50rpx !important;
	}
	.inputSelector{
		font-size: 24rpx;
		border: 2rpx solid #e5e5e5;
		box-sizing: border-box;
		border-radius: 8rpx;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		flex: 1;
		height: 55rpx;
	}

	.content {
		font-size: 14px;
		line-height: 24px;
		height: 100%;
		// overflow-y: scroll;
		// background-color: #fff;
	}

	// 输入框下拉框布局--------------start
	.uni-forms-item__label {
		width: 40px !important;
		font-weight: bold;
	}

	.uni-forms-item__content {
		width: 220rpx !important;
	}

	.uni-forms-item {
		margin-right: 20rpx !important;
	}

	.deviceClass {
		background-color: #fff;
		width: calc(100% - 50rpx);
		margin: 20rpx auto 0;
		padding: 25rpx 15rpx 0;
	}

	.storageTankClass {
		background-image: url(../../static/oilDrumTo.png);
		background-size: contain;
		background-repeat: no-repeat;
	}

	.storageTankClassTo {
		background-image: url(../../static/oilDrum.png);
		background-size: contain;
		background-repeat: no-repeat;
	}

	.container1 {
		margin-left: 10rpx;
	}

	.container2 {
		margin-left: 0rpx;
	}

	.proportion {
		width: 15rpx;
		position: relative;
		border: 1rpx solid #000000;
		border-right: none;
		margin-top: 10rpx;
	}

	.proportionTo {
		width: 15rpx;
		position: relative;
		border: 1rpx solid #000000;
		border-right: none;
		margin-top: 20rpx;
	}

	.scale {
		display: flex;
		flex-direction: column;
		font-size: 20rpx;
		margin-top: 10rpx;
	}

	.scaleTo {
		display: flex;
		flex-direction: column;
		font-size: 20rpx;
		margin-top: 20rpx;
	}

	.scaleLi {
		flex: 1;
		border-left: 1px solid #000000;
		border-top: 1px solid #000000;
		position: relative;
		width: 10rpx;
	}

	.scaleLiShort {
		width: 5rpx;
	}

	.scaleLiText {
		position: absolute;
		top: -22rpx;
		color: red;
		left: calc(100% + 5rpx);
	}
</style>